<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Shopping list</title>
		<style>
			p {
				color: yellow;
				font-family: Arial, Sans-serif;
				font-size: 1.2em;
			}
			body {
				color: white;
				background-color: black;
			}
			#purchases {
				border: 1px solid white;
				background-color: #333;
				color: #ccc;
				padding: 1em;
			}
			#purchases li {
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<h1>What to Buy</h1>
		<p title="a gentle reminder">Don't forget to buy this stuff.</p>
		<p>This is just a test</p>
		<ul id="purchases">
			<li>A tin of beans</li>
			<li class="sale">Cheese</li>
			<li class="sale important">Milk</li>
		</ul>
		<script>
			let paras = document.getElementsByTagName("p");
			for(let i = 0; i < paras.length; i++) {
				let paraTitle = paras[i].getAttribute("title");
				if(paraTitle != null)
					alert(paraTitle);
			}
		</script>
	</body>
</html>